<template>
  <div class="navBar-container">
    <div class="nav-header">
      <div class="left">
        <i class="iconfont icon-gengduo"></i>
        <el-image
          :src="require('@/assets/yuxilogo.png')"
          class="logo"
          fit="contain"
        ></el-image>
      </div>
      <div class="right">
        <div class="toindex">
          <span class="tit">宇喜首页</span>
        </div>
        <!-- 弹出框 -->
        <el-popover
          placement="bottom"
          width="200"
          trigger="hover"
          offset="1629"
        >
          <popup></popup>
          <el-image
            slot="reference"
            :src="require('@/assets/头像.png')"
            class="headpic"
            fit="contain"
          ></el-image>
        </el-popover>
      </div>
    </div>
    <div class="nav-Bar">
      <h2 class="tit">服务市场</h2>
      <div class="menu">
        <div class="item">
          <span class="text">研发创新</span>
        </div>
        <div class="item">
          <span class="text">行业</span>
        </div>
        <div class="item">
          <span class="text">服务</span>
        </div>
        <div class="item">
          <span class="text">体验馆</span>
        </div>
      </div>
      <el-input
        placeholder="输入案例/解决方案"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <router-view />
  </div>
</template>

<script>
import popup from './components/popup'
export default {
  // 定义属性
  data() {
    return {}
  },
  components: {
    popup
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less" scoped>
.navBar-container {
  text-align: left;
  background-color: darkblue;
  width: 100%;
  height: auto;
  /deep/ .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    width: 100%;
    background-color: #fff;
    .left {
      display: flex;
      align-items: center;
      .iconfont {
        margin: 0 28px;
        font-size: 16px;
        cursor: pointer;
      }
      .logo {
        width: 109px;
        height: 56px;
        cursor: pointer;
      }
    }
    .right {
      display: flex;
      align-items: center;
      .toindex {
        padding: 0 20px;
        border-right: 1px solid #ccc;
        .tit {
          font-size: 14px;
          color: #555555;
        }
      }
      .headpic {
        margin-left: 20px;
        margin-right: 40px;
        width: 32px;
        height: 32px;
      }
    }
  }
  /deep/ .nav-Bar {
    display: flex;
    align-items: center;
    height: 80px;
    background-color: #da251d;
    .tit {
      margin-left: 18.75%;
      margin-right: 11%;
      font-size: 32px;
      font-weight: 500;
      color: #ffffff;
      line-height: 36px;
    }
    .menu {
      display: flex;

      & .item:last-child {
        margin-right: 0px;
      }
      .item {
        margin-right: 35px;
        .text {
          font-size: 18px;
          cursor: pointer;
          color: #ffffff;
          line-height: 60px;
        }
      }
    }
    .el-input-group {
      margin-left: 18%;
      width: 340px;
      height: 32px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      .el-input__inner {
        background-color: rgba(255, 255, 255, 0);
        border: none;
      }
      ::placeholder {
        font-size: 14px;
        color: #ffffff;
        line-height: 60px;
        opacity: 0.6;
      }
      .el-input-group__append {
        background-color: rgba(255, 255, 255, 0);
        border: none;
      }
      .el-button {
        color: #fff;
      }
    }
  }
}
</style>
